
<template>
  <div class="common-details">
    <customDetailsTopbar title="年度重点工作" :show-right-icon="true" flag @back="back" />
    <div id="customScroolBox" class="d-scroll px-1">
      <customSearch ref="customSearch" placeholder="请输入年度重点工作名称" title="年度重点工作列表" :total="total" @search="handleSearch" @superSearch="openSuperSearch" />
      <div class="listInner">
        <div v-if="listData && listData.length>0" class="common_list">
          <div v-for="(item, index) in listData" :key="index" class="list_item" @click="goToDetails(item)">
            <div class="content_area">
              <div class="number_order">{{ index + 1 }}</div>
              <div class="right_content">
                <div class="content_title singe-line" style="max-width: 100%">
                  {{ item.workName }}
                </div>
                <ul>
                  <li>
                    <i class="iconfont c-text-color1">&#xe8d5;</i>
                    <div class="label">年份：</div>
                    <div class="value">{{ item.dataYear }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color2">&#xe634;</i>
                    <div class="label">类型：</div>
                    <div class="value">{{ item.workType }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color3">&#xe685;</i>
                    <div class="label">集团下发时间：</div>
                    <div class="value">{{ item.sendTime }}</div>
                  </li>
                  <li v-if="current !== '碳排放管理'">
                    <i class="iconfont c-text-color4">&#xe634;</i>
                    <div class="label">企业数量：</div>
                    <div class="value">{{ item.num }}</div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <customLoadmore ref="customLoadmore" :page-num="formInline.pageNum" :pages="pages" @load="handlePages" />
      </div>
      <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%' }" lock-scroll safe-area-inset-bottom close-on-popstate closeable class="custom-van-pop">
        <div class="pop-vertical-flex">
          <div class="pop-content">
            <custom-timer type="year" title="所属年份" :is-interval="false" placeholder="请选择所属年份" :date-value="formInline.years" @update:dateValue="getTime" />
          </div>
          <div class="pop-bottom">
            <van-button type="default" @click="resetSuperSearch">清空</van-button>
            <van-button type="info" @click="handleSuperSearch">确认</van-button>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import customTimer from '@/components/common/custom-timer.vue'
import refHandler from '@/assets/mixin/refHandler'
import commonList from '@/assets/mixin/commonList'
// import { parseTime } from '@/utils'
import {
  aqYearWorkList,
  hbYearWorkList,
  nyYearWorkList,
  tpfYearWorkList,
  xfYearWorkList
} from '@/api/commonPage/AnnualWork'
import CustomDetailsTopbar from '@/components/globals/custom-details-topbar.vue'

export default {
  components: { CustomDetailsTopbar, customTimer },
  mixins: [commonList, refHandler],
  data() {
    return {
      formInline: {
        pageNum: 1,
        pageSize: 10,
        workName: '', // 年度重点工作名称
        years: new Date().getFullYear() + '' // 所属年份
      },
      total: 0,
      pages: 0,
      current: '',
      listData: []
    }
  },
  mounted() {
    const { current } = this.$route.query
    this.current = current || ''
    this.getList()
  },
  methods: {
    // 分页
    handlePages(value) {
      this.formInline.pageNum = value
      this.getList()
    },
    // 企业名称查询
    handleSearch(value) {
      this.formInline.workName = value
      this.formInline.pageNum = 1
      this.listData = []
      this.getList()
    },
    // 跳转详情
    goToDetails(item) {
      this.$router.push({
        path: '/staging/AnnualWorkDetails',
        query: { current: this.current, workId: item.workId }
      })
    },
    // 获取列表数据
    async getList() {
      this.$refs.customLoadmore.loadStatus = true
      const api = {
        安全生产: aqYearWorkList,
        环保管理: hbYearWorkList,
        消防管理: xfYearWorkList,
        能源管理: nyYearWorkList,
        碳排放管理: tpfYearWorkList
      }
      const { status, data } = await api[this.current](this.formInline)
      if (status === 0 && data) {
        this.total = data.total
        this.listData = this.listData.concat(data.list)
        this.pages = data.pages
      }
      this.$refs.customLoadmore.loadStatus = false
    },
    getTime(val) {
      this.formInline.years = val
    },
    // 高级查询
    handleSuperSearch() {
      this.formInline.pageNum = 1
      this.superSearch = false
      this.listData = []
      this.getList()
    },
    // 重置高级查询
    resetSuperSearch() {
      this.formInline.years = ''
      this.formInline.workName = ''
      this.formInline.pageNum = 1
      this.$refs.customSearch.restore()
      // this.superSearch = false
      // this.listData = []
      // this.getList()
    },
    // 返回工作台
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { current: this.current }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.checkbox-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
  }
</style>

